import React, { Component } from 'react';
class shfe extends Component {
  constructor() {
    super();
    this.state = {
      title:'受控组件',
      title2:'非受控组件'
    }
  }
  
  // 受控
  shou = (e)=>{
    // console.log(e);
    this.setState({
      title: e.target.value
    })
  }

  // 非受控
    // 创建ref对象
    titleRef = React.createRef()

    Ref = ()=>{
      console.log(this.titleRef.current.value);
    }


  render() { 
    return ( 
      <>
        <h2>受控</h2>
        <div className=''>
          {this.state.title}
          <input type="text" value={this.state.title} onChange={this.shou} />
        </div>

        <h2>非受控</h2>
        <div className=''>
          {this.state.title2}
          <input type="text" ref={this.titleRef} />
          <button onClick={this.Ref}>获取input输入的内容</button>
        </div>
      </>
     );
  }
}
 
export default shfe;